import { Form, Toast, Button, Checkbox, Icon } from '@douyinfe/semi-ui'
import { IconEyeClosedSolid, IconEyeOpened, IconLoading, IconSpin } from '@douyinfe/semi-icons'

import { useTranslation } from 'react-i18next'

const LoginView = styled.div`
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-form {
    width: 450px;
    /* height: 600px; */
    background-color: var(--semi-color-bg-0);
    padding: 10px 30px;
    border: rgba(255, 255, 255, 0.1) solid 2px;
    border-radius: 10px;
    color: var(--semi-color-text-1);
    font-size: 14px;
    animation: am-in-body-winLogin-form 0.8s forwards;
    .item {
      margin-bottom: 15px;
      font-size: 12px !important;
    }
    .form-title {
      h1 {
        font-size: 30px;
        font-weight: normal;
        margin-bottom: 0;
      }

      p {
        font-size: 12px;
        padding-bottom: 10px;
      }
    }
    .form-input {
      padding: 4px 20px;
      border: var(--semi-color-fill-1) solid 2px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;

      p {
        font-size: 10px;
        color: var(--semi-color-text-3);
        margin-top: 8px;
        margin-bottom: 2px;
        opacity: 0.7;
      }
      input {
        border: none;
        background-color: transparent;
        padding: 0px;
        font-size: 16px;
        /* line-height: 1.2em; */
        height: 30px;
        margin-bottom: 4px;
        color: var(--semi-color-text-2);
      }
    }
  }
`
interface ILoginProps {
  username: string
  password: string
}

const Login = () => {
  const { t } = useTranslation()
  const navigate = useNavigate()
  const [hidePassword, setHidePassword] = useState(true)
  const [formData, setFormData] = useState<ILoginProps>({
    username: 'admin',
    password: 'sssssssssssssssssss',
  })
  const handleSubmit = async () => {
    const tid = Toast.info({
      top: 60,
      theme: 'light',
      content: '正在登录...',
      duration: 0,
      showClose: false,
      icon: <IconSpin spin />,
    })
    navigate('/panel')
    Toast.success({
      duration: 1,
      showClose: true,
      content: 'ok',
      icon: null,
      id: tid,
    })
    // LDAPI.login([formData.username, formData.password])
    //   .then((res) => {
    //     if (res.code == 200) {
    //       navigate('/home')
    //     }
    //     Toast[res.code == 200 ? 'success' : 'error']({
    //       duration: 1,
    //       showClose: true,
    //       content: res.message,
    //       icon: null,
    //       id: tid,
    //     })
    //   })
    //   .catch((error: any) => {
    //     Toast.error(error.data.errors[0].detail)
    //   })
  }
  return (
    <>
      <LoginView>
        <div className="login-form">
          <div className="item form-title">
            <div>
              <h1>{t('PLEASE LOG IN')}</h1>
              <p className="py-2">
                {t('No account? Click here to')}{' '}
                <a href="#" onClick={() => navigate('register')}>
                  {t('CREATE')}
                </a>
              </p>
            </div>
          </div>

          <div className="item">
            <div className="form-input">
              <p>{t('USERNAME')}</p>
              <input
                type="text"
                value={formData.username}
                placeholder="you@example.com"
                onChange={(evt) => setFormData({ ...formData, username: evt.target.value })}
              />
            </div>
          </div>

          <div className="item">
            <div className="form-input">
              <p>{t('PASSWORD')}</p>
              <div className="flex justify-between items-center">
                <input
                  type={hidePassword ? 'password' : 'text'}
                  value={formData.password}
                  placeholder={t('Please enter your password')}
                  onChange={(evt) => setFormData({ ...formData, password: evt.target.value })}
                />
                <Icon
                  onClick={() => {
                    setHidePassword(!hidePassword)
                  }}
                  svg={hidePassword ? <IconEyeOpened /> : <IconEyeClosedSolid />}
                  title={hidePassword ? t('show password') : t('hide password')}
                  className="hover:color-[--semi-color-text-2] cursor-pointer transition-color"
                />
              </div>
            </div>
          </div>

          <div className="item">
            <div className="py-1 pb-5">
              <div className="flex flex-1 justify-between items-center">
                <Checkbox style={{ fontSize: 'inherit' }}>{t('Remember Password')}</Checkbox>
                <div>
                  <a href="#" onClick={() => navigate('forgotpass')}>
                    {t('Forgot Password?')}
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div className="item">
            <div className="flex flex-col">
              <Button size="large" theme="solid" type="primary" onClick={handleSubmit}>
                {t('LOGIN')}
              </Button>
              <br />
              <Button size="large" theme="borderless" type="tertiary" onClick={() => navigate('register')}>
                {t('CREATE AN ACCOUNT')}
              </Button>
            </div>
          </div>

          <div className="item">
            <div className="pt-5">
              <Checkbox style={{ fontSize: 'inherit' }}>
                <div>
                  <div>
                    {t('I have read and agreed to the')} <a href="#">{t('User Agreement')}</a> {t('and')}{' '}
                    <a href="#">{t('Privacy Agreement')}</a>
                  </div>
                </div>
              </Checkbox>
            </div>
          </div>
        </div>
      </LoginView>
    </>
  )
}

export default Login
